<template>
  <div class="player-bottom">
    <div class="player-progress">
        <span ref="eleCurrentTime">00:00</span>
        <div class="progress-bar" @click="progressClick" ref="progressbar">
            <div class="progress-line" ref="progressLine">
                <div class="progress-dot"></div>
            </div>
        </div>
        <span ref="eleTotalTime">{{minute}}:{{second}}</span>
    </div>
    <div class="player-controll">
        <div class="mode loop" @click="mode" ref="mode"></div>
        <div class="prev" @click="prev"></div>
        <div class="play" @click="play" ref="play"></div>
        <div class="next" @click="next"></div>
        <div class="favorite" @click="favorite" :class="{active:isFavorite(currentSong)}"></div>
    </div>
  </div>
</template>

<script>
import { formartTime } from '../../tools/tools'
import { mapGetters,mapActions } from 'vuex'
import modeType from '../../store/modeType'
export default {
  name: 'PlayerBottom',
  data() {
      return {
          minute:'',
          second:'',
      }
  },
  props:{
      totalTime:{
          type:Number,
          default:0,
          required:true
      },
      currentTime:{
        type:Number,
        default:0,
        required:true
      }
  },
  computed:{
      ...mapGetters([
          'isPlaying',
          'modeType',
          'currentIndex',
          'currentSong',
          'favoriteList'
      ])
  },
  methods: {
      ...mapActions([
          'setIsPlaying',
          'setModeType',
          'setCurrentIndex',
          'setCurTime',
          'setFavoriteSong'
      ]),
      play(){
          this.setIsPlaying(!this.isPlaying)
      },
      // 上一首下一首这里有问题要解决
      prev(){
          this.setCurrentIndex(this.currentIndex-1)
      },
      next(){
          this.setCurrentIndex(this.currentIndex+1)
      },
      // 模式
      mode(){
          if(this.modeType === modeType.loop){
              this.setModeType(modeType.one)
          }else if(this.modeType === modeType.one){
              this.setModeType(modeType.random)
          }else if(this.modeType === modeType.random){
              this.setModeType(modeType.loop)
          }
      },
      // 收藏
      favorite(){
          // 将当前歌曲映射传进去
          this.setFavoriteSong(this.currentSong)
      },
      // 定义一个方法判断当前歌有没有被收藏
      isFavorite(song){
        //   console.log(this.favoriteList);
          let result = this.favoriteList.find((val) => {
              return val.id === song.id
          })
          return result !== undefined
      },
      // 点击进度条播放对应的位置
      progressClick(e){
        // 1.计算进度条的位置
        /* 🔔 如果是通过e.target来获取偏移距离跟宽度，在进度条有一定播放宽度
              的时候，点会前面的位置会发生圆点来回跳
        */
        //   let normalLeft = e.target.offsetLeft
          let normalLeft = this.$refs.progressbar.offsetLeft
          let eventLeft = e.pageX
          let clickLeft = eventLeft - normalLeft
        //   let progressWidth = e.target.offsetWidth
          let progressWidth = this.$refs.progressbar.offsetWidth
          let value = clickLeft / progressWidth
          this.$refs.progressLine.style.width = value * 100 + '%'
          // 2.计算当前应该从什么地方开始播放
          let currentTime = this.totalTime * value
          this.setCurTime(currentTime)
      }
  },
  watch:{
      isPlaying(newValue,oldValue){
          if(newValue){
              this.$refs.play.classList.add("active")
            //   console.log(formartTime(this.totalTime));
            // console.log(this.currentTime);
          }else{
              this.$refs.play.classList.remove("active")
          }
      },
      modeType(newValue,oldValue){
          if(newValue === 0){
              this.$refs.mode.classList.remove("random")
              this.$refs.mode.classList.add("loop")
          }else if(newValue === 1){
              this.$refs.mode.classList.remove("loop")
              this.$refs.mode.classList.add("one")
          }else if(newValue === 2){
              this.$refs.mode.classList.remove("one")
              this.$refs.mode.classList.add("random")
          }
      },
      // 歌曲总时长
      totalTime(newValue,oldValue){
          if(newValue){
              this.minute = formartTime(this.totalTime).minute
            //   console.log(this.minute);
              this.second = formartTime(this.totalTime).second
            //   console.log(this.second);
          }
      },
      // 当前播放的时间
      currentTime(newValue,oldValue){
          if(newValue){
              // 1.格式化当前播放的时间
              let time = formartTime(this.currentTime)
              this.$refs.eleCurrentTime.innerHTML = time.minute + ':' + time.second
              // 2.根据当前播放的时间计算比例
              let line = newValue / this.totalTime * 100
            //   console.log(line);
              this.$refs.progressLine.style.width = line + '%'
          }
      }
  }
}
</script>

<style scoped lang="scss">
@import '../../assets/css/variable.scss';
@import '../../assets/css/mixin.scss';
.player-bottom{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    .player-progress{
        width: 80%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span{
            @include font-size($font_samll);
            @include font-color()
        }
        .progress-bar{
            width: 100%;
            margin: 0 10px;
            height: 10px;
            background-color: #fff;
            .progress-line{
                position: relative;
                width: 0%;
                height: 100%;
                // @include bg_color()
                background-color: #ccc;
                .progress-dot{
                    position: absolute;
                    left: 100%;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    background-color: #fff;
                }
            }
        }
    }
    .player-controll{
        width: 80%;
        margin: 0 auto;
        padding: 50px 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        div{
            width: 84px;
            height: 84px;
        }
        .mode{
            &.loop{
                @include bg_img('../../assets/images/loop');
            }
            &.one{
                @include bg_img('../../assets/images/one');
            }
            &.random{
                @include bg_img('../../assets/images/shuffle');
            }
        }
        .prev{
            @include bg_img('../../assets/images/prev');
        }
        .play{
            @include bg_img('../../assets/images/play');
            &.active{
            @include bg_img('../../assets/images/pause');
            }
        }
        .next{
            @include bg_img('../../assets/images/next');
        }
        .favorite{
            @include bg_img('../../assets/images/un_favorite');
            &.active{
                @include bg_img('../../assets/images/favorite');
            }
        }
    }
}
</style>
